<template>
  <div>
    <!-- 在使用表单验证时，需要注意：
    1.必须给表单对象绑定一个对象：:model="loginForm"，而且不能写成：v-model="loginForm"
    2.所有的子控件的绑定对象必须是表单对象的内部对象，比如：v-model="loginForm.username"，否则总是验证失败
     -->
    <el-form class="login-container" :model="loginForm" ref="loginForm"
             :rules="rules" label-position="left">
      <h3 class="title">OSC-熙熙运维平台</h3>
      <el-form-item prop="username">
        <el-input type="text" v-model="loginForm.username" auto-complete="off" placeholder="用户名"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input type="password" v-model="loginForm.password" auto-complete="off" placeholder="密码"></el-input>
      </el-form-item>
      <el-checkbox class="login-remember" v-model="checked">记住密码</el-checkbox>
      <el-form-item style="width:100%;">
        <el-button type="primary" style="width:48%;" @click="reset">重 置</el-button>
        <el-button type="primary" style="width:48%;" @click="submit" :loading="logining">登 录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import Cookies from 'js-cookie'
export default {
  name: 'Login',
  // eslint-disable-next-line vue/no-unused-components
  components: { Cookies },
  data () {
    return {
      logining: false,
      loginForm: {
        username: 'admin',
        password: '123456'
      },
      rules: {
        username: [
          {
            required: true,
            message: '请输入用户名',
            trigger: 'blur'
          },
          {
            min: 5,
            max: 12,
            message: '长度在 5 到 12 个字符',
            trigger: 'blur'
          }
        ],
        password: [
          {
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          },
          {
            min: 6,
            max: 15,
            message: '长度在 6 到 15 个字符',
            trigger: 'blur'
          }
        ]
      },
      checked: true
    }
  },
  methods: {
    submit() {
      this.logining = true
      const userInfo = {
        account: this.loginForm.account,
        password: this.loginForm.password
      }
      console.log(this.$api)
      this.$api.login(JSON.stringify(userInfo)).then((res) => {
        Cookies.set('token', res.data.token) // 放置token到Cookie
        localStorage.setItem('token', res.data.token);
        sessionStorage.setItem('user', userInfo.account) // 保存用户到本地会话
        this.$router.push('/home')  // 登录成功，跳转到主页
      }).catch(function(res) {
        alert(res);
      });
    },
    reset () {
      this.$refs.loginForm.resetFields()
    }
  }
}
</script>

<style lang="scss" scoped>
.login-container {
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -moz-border-radius: 5px;
  background-clip: padding-box;
  margin: 180px auto;
  width: 350px;
  padding: 35px 35px 15px 35px;
  background: #fff;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;

  .title {
    margin: 0px auto 40px auto;
    text-align: center;
    color: #505458;
  }

  .remember {
    margin: 0px 0px 35px 0px;
  }
}
</style>
